<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        th,
        td {
            padding: 15px 25px;
            text-align: center;

        }

        #modifyModal {
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #modify-modal-box {
            width: 100%;
            height: 100%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px 0px;

        }

        #modifyModalContent {
            border-radius: 10px;
            padding: 30px;
            background-color: rgb(255, 255, 255);

        }

        #modifyModal-1 {
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #modify-modal-box-1 {
            width: 100%;
            height: 100%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px 0px;

        }

        #modifyModalContent-1 {
            border-radius: 10px;
            padding: 30px;
            background-color: rgb(255, 255, 255);

        }

        .butBox {
            display: flex;
            justify-content: space-around;
        }

        #add {
            margin-left: 10px;
        }

        #seek {
            margin-left: 20px;
            height: 30px;
            border-radius: 5px;
        }
        #reset{
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <button type="button" id="add" class="btn btn-success">点击新增</button>
    <input id="seek" type="text" placeholder="请搜索关键字">
    <button type="button" id="reset" class="btn btn-warning">重置</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <h4>您确定要删除吗?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="deleteBtn">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div id="box">
        <table class="table">
            <thead>
                <tr>
                    <th>名字</th>
                    <th>年龄</th>
                    <th>城市</th>
                    <th>月薪</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
             <td>张三</td>
             <td>30</td>
             <td>成都</td>
             <td>7000</td>
             <td><button type="button" class="btn btn-info">编辑</button></td>
             <td><button type="button" class="btn btn-danger">删除</button></td>
          </tr> -->
            </tbody>
        </table>
    </div>
    <div id="modifyModal">
        <div id="modify-modal-box">
            <div id="modifyModalContent">
                <form>
                    <div style="display: none;" class="row">
                        <label class="col-sm-5">id:</label><input class="col-sm-6" id="dataId" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">姓名：</label><input class="col-sm-6" id="dataName" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">年龄: </label><input class="col-sm-6" id="dataAge" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">城市:</label><input class="col-sm-6" id="dataCity" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">月薪：</label><input class="col-sm-6" id="dataSalary" type="text" />
                    </div>
                    <br>
                </form>
                <div class="butBox">
                    <button id="cancelBtn" class=" btn btn-danger">取消</button>
                    <button id="confirmBtn" class=" btn btn-primary">确定修改</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modifyModal-1">
        <div id="modify-modal-box-1">
            <div id="modifyModalContent-1">
                <form>
                    <div style="display: none;" class="row">
                        <label class="col-sm-5">id:</label><input class="col-sm-6" id="dataId" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">姓名：</label><input class="col-sm-6" id="name" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">年龄: </label><input class="col-sm-6" id="age" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">城市:</label><input class="col-sm-6" id="city" type="text" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">月薪：</label><input class="col-sm-6" id="salary" type="text" />
                    </div>
                    <br>
                </form>
                <div class="butBox">
                    <button id="cancelBtn-1" class=" btn btn-danger">取消</button>
                    <button id="addBtn" class=" btn btn-primary">确定添加</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        let data = [
            { id: 1, name: "张三", age: 30, city: "成都", salary: 8500 },
            { id: 2, name: "李四", age: 24, city: "重庆", salary: 9000 },
            { id: 3, name: "王五", age: 30, city: "长沙", salary: 7600 },
            { id: 4, name: "吴六", age: 30, city: "成都", salary: 8000 },
            { id: 5, name: "王锤", age: 30, city: "上海", salary: 12000 },
            { id: 5, name: "李华", age: 30, city: "上海", salary: 10000 },
            { id: 5, name: "周八", age: 30, city: "上海", salary: 6000 },
            { id: 5, name: "张鑫", age: 30, city: "上海", salary: 100 },
        ];
        let deleteId;
        function renderTbody(data) {
            $("#box tbody").empty();
            for (let i = 0; i < data.length; ++i) {
                const item = data[i];
                $("#box tbody").append(`
            <tr>
               <td>${item.name}</td>
               <td>${item.age}</td>
               <td>${item.city}</td>
               <td>${item.salary}</td>
               <td>
                <button data-id="${item.id}" id="editor" type="button"class="modify-btn btn btn-success">编辑</button>
                <button data-id="${item.id}" type="button" class="delete-btn btn btn-danger" data-toggle="modal" data-target="#myModal">删除</button>
               </td>
          </tr>
            `)
            }
        };
        renderTbody(data);
        // 点击删除按钮
        $("#box tbody").on("click", ".delete-btn", function (event) {
            deleteId = Number(event.currentTarget.attributes['data-id'].value);
        });
        //确定按钮删除
        $("#deleteBtn").on("click", function (event) {

            // 通过id 找到对应数据 并删除
            const newData = data.filter(item => {
                console.log(item, item.id !== deleteId)
                return item.id !== deleteId
            });
            // 基于新数据  刷新页面
            renderTbody(newData);
            data = newData;
            $('#myModal').modal('hide')
        });
        //编辑按钮
        $("#box tbody").on("click", "#editor", function (event) {
            let dataId = parseInt($(event.target).attr("data-id"));
            // const dataId = Number(event.currentTarget.attributes['data-id'].value);
            //展示弹窗
            $("#modifyModal").show()
            // 数组提供了一个 查找的方法
            const currentWage = data.find((item) => {
                console.log(item)
                return item.id === dataId;
            });
            $("#dataId").val(currentWage.id)
            $("#dataName").val(currentWage.name);
            $("#dataAge").val(currentWage.age);
            $("#dataCity").val(currentWage.city);
            $("#dataSalary").val(currentWage.salary);
        });
        // 取消按钮 关闭弹窗
        $("#cancelBtn").on("click", function () {
            $("#modifyModal").hide();
        });
        //修改信息
        $("#confirmBtn").on("click", (event) => {
            // 获取input的值
            const id = $("#dataId").val()
            const name = $("#dataName").val();
            const age = $("#dataAge").val();
            const city = $("#dataCity").val();
            const salary = $("#dataSalary").val();
            console.log({ id, name, age, city, salary });
            // 确定并保存 wage
            for (let i = 0; i < data.length; i++) {
                const item = data[i];
                console.log(item)
                if (item.id === parseInt(id)) {
                    item.id = id;
                    item.name = name;
                    item.age = age;
                    item.city = city;
                    item.salary = salary;
                }
            }
            //重新渲染
            renderTbody(data);
            //隐藏弹窗
            $("#modifyModal").hide()
        });
        //增加
        $("#add").on("click", function () {
            let dataId = parseInt($(event.target).attr("data-id"));
            // const dataId = Number(event.currentTarget.attributes['data-id'].value);
            //展示弹窗
            $("#modifyModal-1").show()
        });
        $("#cancelBtn-1").on("click", function () {
            $("#modifyModal-1").hide();
        });
        //确定增加
        $("#addBtn").on("click", function () {
            let newName = $("#name").val();
            let newAge = $("#age").val();
            let newCity = $("#city").val();
            let newSalary = $("#salary").val();
            let newArr = {
                id: data.length + 1,
                name: newName,
                age: newAge,
                city: newCity,
                salary: newSalary
            }
            if (newName === "" && newAge === "" && newCity === "" && newSalary === "") {
                renderTbody(data)
                return
            } else {
                data.push(newArr)
                renderTbody(data)
            }
            $('#modifyModal-1').hide()
        });
        //查找

        $("#seek").on("blur", function (event) {
            // 去除前后空格
            const value = event.target.value;
            if (!value) {
                renderTbody(data);
                return;
            }
            console.log(value)
            const seekData = [];
            // value 跟 staff中 每一项 value 进行对比
            for (let i = 0; i < data.length; ++i) {
                // 是否包含子字符串
                if (data[i].name.includes(value)) {
                    //保留原有的数据用于恢复
                    seekData.push(data[i]);
                }
            }
            renderTbody(seekData);//重新渲染
        });
         //重置按钮
         $("#reset").on("click", function () {
            $("#seek").val("")
            renderTbody(data)
        });
    </script>
</body>

</html>
</body>

</html>